<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    button{width: 30px}
    #a{
        display: none;
        position: absolute;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: #fff246;
        //z-index: 3;
    }
    #b{
        display: block;
        top: 100px;
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #9192ff;
       // z-index:2;
    }
</style>
<script>
    function  ashow(){
        document.getElementById("a").style.display="block";
        document.getElementById("b").style.display="none";
    }
    function  bshow(){
        document.getElementById("a").style.display="none";
        document.getElementById("b").style.display="block";

    }
</script>
<body>

<div id="a">aaaaaaa</div>
<div id="b">bbbbbbb</div>
<div style="z-index: 5">
    <button onclick="ashow()">
        a
    </button>
    <button onclick="bshow()">
        b
    </button>
</div>
</body>
</html>